<%var csstpl = {%>
<style type="text/css">
	[v-cloak] {
		display: none;
	}
	table tbody a{color: #337ab7;}
	.layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table[lay-even] tr:nth-child(even) {background: none !important;}
	.layui-table thead tr { background:#f2f2f2 !important; border:1px solid #e6e6e6; }
	.layui-table thead tr th { border:none; }
	.layui-table tbody { margin:100px 0; }
	table tbody tr.sep { height: 15px; }
	.layui-table tbody tr.trhead { background:#F8F8F8; border:1px solid #e7eaec; }
	.layui-table tbody tr.trhead:hover { background:#F8F8F8 !important; }
	.layui-table tbody tr.trhead .td1 { text-align:left; border-right:none !important; }
	.layui-table tbody tr.trhead .td2 { text-align:right; border-left:none !important; }
	.layui-table tbody td { text-align:center; }
	.layui-table tbody .pro_info { text-align:left; }
	.layui-table tbody .pro_info img { float:left; margin-right:10px; }

	.shouru_div p{
		padding: 5px;
		border-bottom: 1px #fff dashed ;
	}
	.shouru_div p span{
		position: absolute;
		right: 10px;
	}

	.shouru_div p:last-child{
		border-bottom: none;
	}

	.shouru_div i {
		border-top-color: #000;
		position: absolute;
		left: 88px;
		bottom: -12px;
	}
</style>
<%};%>
<%var jstpl = {%>
<script>
	var app = new Vue({
		el: "#gexin_body",
		data: {
			isshow:false,
			query:{
				type:1,
				shipping_user:"",
				sn:"",
				pageNumber: 1,
				pageSize: 10
			},
			data_result: []
		},
		created: function() {
			this.loadPage("init");
		},
		methods: {
			loadPage: function (model) { //载入模式有两种  init初始化载入 load分页载入
				if (model == "init") {
					this.query.pageNumber = 1;
				}
				Ajax("/system/order/loadOptionData", this.query, function (d) {
					if(!d.state){
						gx.alert(d.msg);
						return false;
					}
					if(d.data.list==null || d.data.list.size<=0 || d.data==null){
						app.query.pageNumber=1;
						app.data_result=[];
						return false;
					}
					app.data_result = d.data.list;
					if (d.data.firstPage == true) {
						layui.laypage.render({
							elem: 'gexin_page' //注意，这里的 test1 是 ID，不用加 # 号
							,
							layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
							count: d.data.totalRow //数据总数，从服务端得到
							,
							limit: app.query.pageSize,
							jump: function (obj, first) {
								app.query.pageNumber = obj.curr;
								if (app.query.pageSize != obj.limit) {
									app.query.pageSize = obj.limit;
									app.loadPage("init");
									return;
								}
								if (!first) {
									app.loadPage("load");
								}
							}
						});
					}
				})
			},
			selectBtn: function () {//查询按钮触发事件
				this.loadPage("init");
			},
			SwitchType:function(type){//点击 订单状态
				this.query.type=type;
				this.loadPage("init");
			},
			selectProduct:function (id) {
				var wenzi= $(".state_b_"+id).text();
				if(wenzi=="展开"){
					$(".product_table_"+id).show();
					wenzi="收起";
				}else{
					$(".product_table_"+id).hide();
					wenzi="展开";
				}
				$(".state_b_"+id).text(wenzi);
			},
			enter:function(id){
				$(".sr_tc_"+id).show();
			},
			leave:function (id) {
				$(".sr_tc_"+id).hide();
			}
		},filters: {
			hidePhone:function (value) {
				return value==null?'无':value.substring(0, 3)+"****"+value.substring(8, value.length);
			},
			timeConversionFormat:function (value) {
				if(value==null || value==""){
					return "无";
				}else{
					return value.substring(5,value.length-3);
				}
			}
		}
	})
</script>
<%};%>
<%layout("../layout/_layout_layui.html",{title:'订单操作列表',jstpl:jstpl,csstpl:csstpl}){ %>
<div class="layui-row" v-cloak>
	<form class="layui-form" method="post"   role="form">

		<div class="layui-col-md12">
			<div class="layui-form-item">
				<label class="layui-form-label">订单状态</label>
				<div class="layui-input-block">
					<button type="button" :class="query.type==1?'layui-btn ':'layui-btn layui-btn-primary'" @click="SwitchType(1)" >全部</button>
					<button type="button" :class="query.type==2?'layui-btn ':'layui-btn layui-btn-primary'" @click="SwitchType(2)" >预付商品</button>
					<button type="button" :class="query.type==3?'layui-btn ':'layui-btn layui-btn-primary'" @click="SwitchType(3)" >待支付</button>
					<button type="button" :class="query.type==4?'layui-btn ':'layui-btn layui-btn-primary'" @click="SwitchType(4)" >待发货</button>
					<button type="button" :class="query.type==5?'layui-btn ':'layui-btn layui-btn-primary'" @click="SwitchType(5)" >已发货</button>
					<button type="button" :class="query.type==6?'layui-btn ':'layui-btn layui-btn-primary'" @click="SwitchType(6)" >退款/售后</button>
				</div>
			</div>
		</div>


		<div class="layui-col-md3">
			<div class="layui-form-item">
				<label class="layui-form-label">订单号</label>
				<div class="layui-input-block">
					<input type="text" v-model="query.sn" placeholder="请输入订单号查询" autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>

		<div class="layui-col-md4">
			<div class="layui-form-item">
				<label class="layui-form-label">关键字</label>
				<div class="layui-input-block">
					<input type="text" v-model="query.shipping_user" placeholder="根据顾客姓名、手机号模糊查询" autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>

		<div class=" layui-col-md3" style="padding-left: 15px;">
			<div class="layui-form-item">
				<button type="button" class="layui-btn" @click="selectBtn"><i class="layui-icon">&#xe615;</i>查询/筛选</button>
			</div>
		</div>

		<table class="layui-table layui-tab-content" style="margin-top: 15px" lay-skin="line">
			<tbody v-for="item in data_result">
			<tr class="sep"></tr>
			<tr class="trhead">
				<td colspan="4" class="td1">
					<span style="font-size: 24px;font-weight: bolder;color: #1989fa;">{{item.order_sn}}</span>
					<span style="padding-left: 20px; font-size: 14px;font-weight: bold;" v-if="item.is_presell==1">预付款订单</span>
					<span style="right: 20px;position: absolute;">{{item.order_status_name}}</span>
				</td>
			</tr>
			<tr>
				<td style="width: 20px;">
					<img   src="">
				</td>
				<td colspan="3" style="min-height: 60px;height: 60px;" >
					<span style="display: block; text-align: left;">{{item.shipping_user}}&nbsp;&nbsp;{{item.shipping_tel |hidePhone}}<b style="right: 20px;position: absolute;">多余字段</b></span>
					<p style="text-align: left;">{{item.address}}</p>
				</td>
			</tr>

			<tr v-if="item.order_status==3" >
				<td style="width: 20px;">
					<img  src="">
				</td>
				<td colspan="3" style="text-align: left;">
					<p>{{item.shipping_comp_name}}<b>（{{item.shipping_sn}}）</b></p>
				</td>
			</tr>
			<tr>
				<td style="width: 20px;">
					<img  src="">
				</td>
				<td colspan="3" style="text-align: left;" >
					<span style="display: block; font: 16px bolder; color: #2d2f33;">{{item.shop_count}}&nbsp;件商品 <b style="color: #1989fa;right: 20px;position: absolute;" @click="selectProduct(item.id)" :class="'state_b_'+item.id">展开</b></span>
				</td>
			</tr>

			<tr style="display: none;" :class="'product_table_'+item.id" v-for="p in item.product_list">
				<td></td>
				<td style="text-align: left;" >{{p.product_name}}</td>
				<td style="text-align: right;" >×{{p.product_cnt}}</td>
				<td style="text-align: right;" >{{p.product_price}}</td>
			</tr>
			<tr>
				<td>
					<img  src="">
				</td>
				<td style="text-align: left;font: 16px bolder; color: #2d2f33;">顾客实付</td>
				<td colspan="2" style="text-align: right;"><b style="color: #5a5e66;">¥{{item.payment_money}}</b></td>
			</tr>
			<tr>
				<td></td>
				<td   style="text-align: left;">
					<p>支付时间:{{item.pay_time |timeConversionFormat }}</p>
					<p>下单时间:{{item.create_time | timeConversionFormat}}</p>
					<p>单号:{{item.order_id}}</p>
				</td>
				<td colspan="2" style="text-align: right;"><!-- 操作按钮放这里 -->
					<a v-if="item.status==1 || item.status==3 || item.status>=5" class="layui-btn layui-btn-primary" href="javascript:;" >打印订单</a>
					<a class="layui-btn layui-btn-primary" :href="'/system/xcx/order/detail/'+item.id+'?admin_source=shangjia'">详情</a>
				</td>
			</tr>

			</tbody>
			<tbody id="tbody_body" v-if="data_result.length==0">
			<tr >
				<td  colspan="8" style="text-align:center;height:300px"><h1>没有数据</h1></td>
			</tr>
			</tbody>
		</table>
		<fieldset id="gexin_page" class="layui-elem-field layui-field-title" ></fieldset>
	</form>
</div>
<%}%>